<template>
  <span>网格合并</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
  <span> grid-template columns、rows简写</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
  <span>让第一列到最后，其他的会自动填充</span>
  <div class="grid-3">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "a1 a1 a2"
    "a1 a1 a2"
    "a3 a3 a3";
  .grid-item-1 {
    grid-area: a1;
  }
  .grid-item-2 {
    grid-area: a2;
  }
  .grid-item-3 {
    grid-area: a3;
  }
}

.grid-2 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template:
    "a1 a1 a2" 1fr
    "a1 a1 a2" 1fr
    "a3 a3 a3" 1fr
    / 1fr 1fr 1fr;
  .grid-item-1 {
    grid-area: a1;
  }
  .grid-item-2 {
    grid-area: a2;
  }
  .grid-item-3 {
    grid-area: a3;
  }
}
.grid-3 {
  width: 150px;
  height: 50px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "a1 a2 a3";
  .grid-item-1 {
    grid-area: a3;
  }
}
</style>
